<template>
	<div class="cinema-wrapper">
		<div class="title">
			<span>{{cinemas.nm}}</span>
			<span class="price-block">
				<span class="price">{{cinemas.sellPrice}}</span>
				<span class="q"> 元起</span>
			</span>
		</div>
		<div class="location-block">
			<div class="location">{{cinemas.addr}}</div>
			<div class="distance">{{cinemas.distance}}</div>
		</div>
		<div class="label-block">
			<div class="allowRefund blue-style">退</div>
			<div class="endorse blue-style">改签</div>
			<div class="snack yellow-style">小吃</div>
			<div class="vipTag yellow-style">折扣卡</div>
			<div class="hallType blue-style">杜比全景声厅</div>
		</div>
		<div class="discount-block" v-if="cinemas.promotion.cardPromotionTag">
			<div class="discount-label">
				<img src="" alt="">
			</div>
			<div class="discount-label-text">{{cinemas.promotion.cardPromotionTag}}</div>
		</div>
		<div class="min-show-block" v-if="cinemas.showTimes">
			<span>近期场次：</span>
			<span class="item">{{cinemas.showTimes}}</span>
		</div>
	</div>
</template>

<script>

export default {
	props:['cinemas']
}
</script>

<style lang="scss" scoped>
.cinema-wrapper:last-child{
	margin-bottom: 48px;
}
.cinema-wrapper{
	margin-left: 15px;
	padding: 13px 15px 13px 0;
	border-bottom: 1px solid #e1e1e1;
	.title{
		height: 23px;
		line-height: 23px;
		font-size: 16px;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		.price-block{
			color: #f03d37;
			line-height: 1.5;
			margin-left: 5px;
			.price{
				font-size: 18px;
			}
			.q{
				font-size: 12px;
			}
		}
	}
	.location-block{
		display: flex;
		margin-top: 6px;
		font-size: 13px;
		color: #666;
		.location{
			flex-grow: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.distance{
			margin-left: 5px;
		}
	}
	.label-block{
		margin: 4px 0;
		color: #777777;
		>div{
			display: inline-block;
			height: 17px;
			line-height: 15px;
			font-size: 12px;
			padding: 0 3px;
			margin-left: 5px;
		}
		.blue-style{
			color: #589daf;
			border: 1px solid #589daf;
			border-radius: 2px;
		}
		.yellow-style{
			color: #f90;
			border: 1px solid #f90;
			border-radius: 2px;
		}
		.allowRefund{
			margin-left: 0;
		}
	}
	.discount-block{
		display: flex;
		align-items: center;
		margin-bottom: 4px;
		.discount-label{
			display: inline-block;
			width: 15px;
			height: 14px;
			img{
				display: block;
				width: 100%;
			}
		}
		.discount-label-text{
			display: inline-block;
			font-size: 12px;
			line-height: 1.5;
			color: #999;
			margin-left: 5px;
		}
	}
	.min-show-block{
		font-size: 12px;
		color: #777777;
		line-height: 18px;
		.item{
			position: relative;
			margin-right: 14px;
		}
		.item:before{
			content: '';
			display: inline-block;
			width: 1px;
			height: 15px;
			background-color: #e1e1e1;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: -7px;
		}
		span:nth-child(2):before{
			content: '';
			display: none;
		}
	}
}
</style>
